<template>
  <div class="comment-tree-node" :style="{ marginLeft: `${level * 12}px` }">
    <div class="comment-card">
      <div class="comment-header">
        <a-avatar :src="getUserAvatar(comment)" size="small" />
        <div class="user-info">
          <span class="username">{{ getUserName(comment) }}</span>
          <span class="time">{{ formatTime(comment.createTime) }}</span>
        </div>
        <div class="badges">
          <a-tag v-if="comment.isAnonymous === 1" color="orange" size="small">匿名</a-tag>
          <a-tag v-if="comment.isCurrentUser" color="blue" size="small">本人</a-tag>
        </div>
      </div>

      <div class="comment-content">
        {{ comment.content }}
      </div>

      <!-- 评论图片 -->
      <div v-if="comment.commentImages && comment.commentImages.length > 0" class="comment-images">
        <a-image-preview-group>
          <a-image
            v-for="(image, index) in comment.commentImages.slice(0, 3)"
            :key="index"
            :src="image"
            :width="40"
            :height="40"
            :preview="{ src: image }"
            class="tree-image"
          />
        </a-image-preview-group>
        <span v-if="comment.commentImages.length > 3" class="more-images">
          +{{ comment.commentImages.length - 3 }}
        </span>
      </div>

      <div class="comment-actions">
        <span class="like-count">
          <LikeOutlined :style="{ color: comment.liked ? '#1890ff' : '#999' }" />
          {{ comment.likeCount || 0 }}
        </span>
        <span v-if="comment.replyCount > 0" class="reply-count">
          <MessageOutlined />
          {{ comment.replyCount }}
        </span>
        <span class="comment-id">#{{ comment.id }}</span>
      </div>
    </div>

    <!-- 子评论 -->
    <div v-if="comment.children && comment.children.length > 0" class="children-comments">
      <CommentTreeNode
        v-for="child in comment.children"
        :key="child.id"
        :comment="child"
        :level="level + 1"
      />
    </div>
  </div>
</template>

<script setup lang="ts">
import { LikeOutlined, MessageOutlined } from '@ant-design/icons-vue'
import dayjs from 'dayjs'
import type { CommentTreeNode as CommentTreeNodeType } from '@/types'

interface Props {
  comment: CommentTreeNodeType
  level: number
}

defineProps<Props>()

// 获取用户头像
const getUserAvatar = (comment: CommentTreeNodeType) => {
  if (comment.isAnonymous === 1) {
    return 'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
  }
  return (
    comment.userInfo?.avatar ||
    'https://gw.alipayobjects.com/zos/antfincdn/XAosXuNZyF/BiazfanxmamNRoxxVxka.png'
  )
}

// 获取用户名
const getUserName = (comment: CommentTreeNodeType) => {
  if (comment.isAnonymous === 1) {
    return '匿名用户'
  }
  return comment.userInfo?.nickName || '未知用户'
}

// 格式化时间
const formatTime = (time: string) => {
  return dayjs(time).format('MM-DD HH:mm')
}
</script>

<style scoped>
.comment-tree-node .comment-card {
  padding: 12px;
  background: #fff;
  border: 1px solid #e8e8e8;
  border-radius: 8px;
  margin-bottom: 8px;
}

.comment-tree-node .comment-card .comment-header {
  display: flex;
  align-items: center;
  margin-bottom: 8px;
}

.comment-tree-node .comment-card .comment-header .user-info {
  flex: 1;
  margin-left: 8px;
}

.comment-tree-node .comment-card .comment-header .user-info .username {
  font-weight: 500;
  margin-right: 8px;
}

.comment-tree-node .comment-card .comment-header .user-info .time {
  font-size: 12px;
  color: #999;
}

.comment-tree-node .comment-card .comment-header .badges {
  display: flex;
  gap: 4px;
}

.comment-tree-node .comment-card .comment-content {
  margin-bottom: 8px;
  line-height: 1.5;
  word-break: break-word;
}

.comment-tree-node .comment-card .comment-images {
  margin-bottom: 8px;
}

.comment-tree-node .comment-card .comment-images .tree-image {
  margin-right: 4px;
  border-radius: 4px;
}

.comment-tree-node .comment-card .comment-images .more-images {
  font-size: 12px;
  color: #999;
}

.comment-tree-node .comment-card .comment-actions {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 12px;
  color: #999;
}

.comment-tree-node .comment-card .comment-actions .like-count,
.comment-tree-node .comment-card .comment-actions .reply-count {
  display: flex;
  align-items: center;
  gap: 4px;
}

.comment-tree-node .comment-card .comment-actions .like-count .anticon,
.comment-tree-node .comment-card .comment-actions .reply-count .anticon {
  font-size: 12px;
}

.comment-tree-node .comment-card .comment-actions .comment-id {
  margin-left: auto;
  color: #ccc;
}

.comment-tree-node .children-comments {
  margin-top: 8px;
  border-left: 2px solid #f0f0f0;
  padding-left: 8px;
}
</style> 